<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>登陆蜗牛共享车位</title>
<link rel="icon" href="images/car-icon.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="nofollow"/>
<link href="css/adminStyle.css" rel="stylesheet" type="text/css" />
<style>
	body{
		width:100%;
		height:100%;
		overflow:hidden;
		background:url(images/bg.jpg) no-repeat;
		background-size:100%;
		position:fixed;
	}
	.loginbutton{
		cursor: pointer;
	}
	.login-hade a:link{
		display: inline-block;
		height: 100px;
		line-height: 100px;
		width: 150px;
		font-size: 15px;
		margin: 0px 15px;
		border-bottom: 5px solid #000000;
		text-align: center;
		text-decoration:none
	}
</style>
</head>
<body>
  <section class="loginform">
   <h1>蜗牛共享车位</h1>
<div>
	<div class="login-hade">
		<a href="javascript:void(0);" id="a1">短信登录</a>
		<a href="javascript:void(0);" id="a2">密码登录</a>
		<div  style="display: none" id="mima">
			<form id="loginform">
				<ul>
					<li>
						<label>用户名：</label>
						<input type="text" class="textBox" name="userTel" placeholder="注册的手机号"/>
					</li>
					<li>
						<label>密码：</label>
						<input type="password" class="textBox" name="userPassword" placeholder="登陆密码"/>
					</li>
					<li>
						<input type="button" class="loginbutton" value="立即登陆" onclick="sub()"/>
					</li>
				</ul>
			</form>
		</div>
		<div id="duanxing">
			<form id="loginform_send">
				<ul>
					<li>
						<label>用户名：</label>
						<input type="text" class="textBox" name="userTel" placeholder="注册的手机号"/>
					</li>
					<li>
						<label>短信：</label>
						<input type="text" class="textBox" name="code" placeholder="手机验证码"/>
						<input type="button"  value="获取验证码" onclick="send()"/>
					</li>
					<li>
						<input type="button" class="loginbutton" value="立即登陆" onclick="sub2()"/>
					</li>
				</ul>
			</form>
		</div>
	</div>
</div>
  </section>
  
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/Particleground.js"></script>
  <script>
	  console.log(console.log(document.referrer))

	  window.onload=function(){
		  a2.style.color="#ccc";
		  a2.style.borderBottom="none"
	  }
	// 当点击短信登录
	$("#a1").click(function () {
		$("#duanxing").css("display","block");
		$("#mima").css("display","none");
		a1.style.color="#333";
		// 免密码登录图片显现
		a1.style.fontWeight="bold"
		// 边框下滑线显现
		a1.style.borderBottom="5px solid #000000";
		// a2颜色变灰，边框下滑线隐藏，密码登录图片隐藏
		a2.style.color="#ccc";
		a2.style.borderBottom="none"
	})
	// 点击密码登录
	$("#a2").click(function () {
		$("#mima").css("display","block");
		$("#duanxing").css("display","none");

		a2.style.color="#333";
		// 密码登录图片显现
		a2.style.fontWeight="bold"
		// 边框下滑线显现
		a2.style.borderBottom="5px solid #000000";
		// a1颜色变灰，边框下滑线隐藏，密码登录图片隐藏
		a1.style.color="#ccc";
		a1.style.borderBottom="none"
	})


	  //方块特效
	  $(document).ready(function() {
		$('body').particleground({
		  dotColor:'blue',
		  lineColor:'#aaaaaa'
		});
		$('.intro').css({
		  'margin-top': -($('.intro').height() /2)
		});
	  });
	$.fn.serializeJson=function(){
		var serializeObj={};
		var array=this.serializeArray();
		var str=this.serialize();
		$(array).each(function(){
			if(serializeObj[this.name]){
				if($.isArray(serializeObj[this.name])){
					serializeObj[this.name].push(this.value);
				}else{
					serializeObj[this.name]=[serializeObj[this.name],this.value];
				}
			}else{
				serializeObj[this.name]=this.value;
			}
		});
		return serializeObj;
	};

	  //点击事件提交表单数据
	  function sub(){
		  var wcwc = $('#loginform').serializeJson();
		$.ajax({
			url:"/login",
			type:"post",
			dataType:"json",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(wcwc),
			success:function(data){
				if(data.code=="1"){
					console.log("登陆成功")
					top.location = "index.html";

				}else{
					console.log("登陆失败")
					alert(data.message);
				}
			}
		})
	  }
	  //点击事件提交表单数据
	  function sub2(){
		  var wcwc = $('#loginform_send').serializeJson();
		  $.ajax({
			  url:"/login",
			  type:"post",
			  dataType:"json",
			  contentType:"application/json;charset=utf-8",
			  data:JSON.stringify(wcwc),
			  success:function(data){
				  if(data.code=="1"){
					  console.log("登陆成功")
					  top.location = "index.html";

				  }else{
					  console.log("登陆失败")
					  alert(data.message);
				  }
			  }
		  })
	  }
	function send(){
		$.ajax({
			url:"message",
			data:$("#loginform_send").serialize(),
			dataType:"json",
			success:function(data){
				if(data.code=="1"){
					alert(data.message);
					window.location.href = "index.html";
				}else{
					alert(data.message);
				}
			}
		})
	}
	  //回车触发登陆点击
	  $("body").keydown(function(event){
		  console.log(event.keyCode);
		  if(event.keyCode==13){
			  sub();
		  }
	  })
  </script>
</body>
</html>